<!--
 * @Description: 编辑会员权益
 * @Author: DXV-RGWU-TUFH-RFCY-IEGMYY
 * @Date: 2023-08-08 16:06:24
 * @LastEditTime: 2023-09-05 12:40:05
 * @LastEditors: DXV-RGWU-TUFH-RFCY-IEGMYY
-->

<template>
  <div class="lb-custom-member-rights-edit">
    <top-nav :title="navTitle" :isBack="true"></top-nav>
    <div class="page-main">
      <el-form
        @submit.native.prevent
        :model="subForm"
        :rules="subFormRules"
        ref="subForm"
        label-width="140px"
        class="dialog-form c-title"
      >
        <el-form-item label="权益名称" prop="title">
          <el-input
            v-model="subForm.title"
            type="text"
            maxlength="10"
            show-word-limit
            placeholder="请输入权益名称"
            :disabled="subForm.is_admin"
          ></el-input>
        </el-form-item>
        <el-form-item label="展示名称" prop="show_title">
          <el-input
            v-model="subForm.show_title"
            type="text"
            maxlength="8"
            show-word-limit
            placeholder="请输入展示名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="权益图标" prop="rights_icon">
          <lb-cover
            :fileList="subForm.rights_icon"
            @selectedFiles="getCover"
          ></lb-cover>
          <lb-tool-tips>图片建议尺寸：120 * 120</lb-tool-tips>
        </el-form-item>
        <el-form-item label="权益说明" prop="rights_text">
          <el-input
            type="textarea"
            :rows="10"
            v-model="subForm.rights_text"
            maxlength="1000"
            show-word-limit
            resize="none"
            placeholder="请输入权益说明"
          ></el-input>
        </el-form-item>
        <el-form-item label="服务方式" prop="type">
          <el-input
            type="text"
            :value="subForm.type === 1 ? '线下核销' : '系统核销'"
            :disabled="true"
          ></el-input>
        </el-form-item>
        <el-form-item label="排序" prop="top">
          <el-input-number
            class="lb-input-number"
            v-model="subForm.top"
            :controls="false"
            :precision="0"
            :min="0"
            placeholder="请输入排序值"
          ></el-input-number>
          <lb-tool-tips>值越大, 排序越靠前</lb-tool-tips>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            @click="submitFormInfo('subForm')"
            v-preventReClick
            >{{ $t('action.submit') }}</el-button
          >
          <lb-button @click="$router.back(-1)">{{
            $t('action.back')
          }}</lb-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      navTitle: '',
      loading: true,
      subForm: {
        id: '',
        title: '',
        show_title: '',
        rights_icon: [],
        rights_text: '',
        top: 0,
        is_admin: 0
      },
      subFormRules: {
        title: { required: true, validator: this.$reg.isNotNull, reg_type: 2, text: '权益名称', trigger: 'blur' },
        show_title: { required: true, validator: this.$reg.isNotNull, reg_type: 2, text: '展示名称', trigger: 'blur' },
        rights_icon: { required: true, type: 'array', message: '请上传图片', trigger: 'change' },
        rights_text: { required: true, validator: this.$reg.isNotNull, reg_type: 2, text: '权益说明', trigger: 'blur' },
        top: { required: true, type: 'number', message: '请输入排序值', trigger: 'blur' }
      }
    }
  },
  async created () {
    let { id } = this.$route.query
    this.navTitle = this.$t(id ? 'menu.CustomMemberRightsEdit' : 'menu.CustomMemberRightsAdd')
    this.subForm.id = id
    if (id) {
      await this.getDetail()
    }
    this.loading = false
  },
  methods: {
    async getDetail () {
      let { id } = this.subForm
      let { code, data } = await this.$api.member.rightsInfo({ id })
      if (code !== 200) return
      data.rights_text = data.rights_text === null ? '' : data.rights_text
      for (let key in this.subForm) {
        this.subForm[key] = data[key]
      }
      this.subForm.rights_icon = [{ url: data.rights_icon }]
    },
    getCover (img) {
      this.subForm.rights_icon = img
    },
    submitFormInfo (name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          let subForm = JSON.parse(JSON.stringify(this.subForm))
          let methodModel = subForm.id ? 'rightsUpdate' : 'rightsAdd'
          subForm.rights_icon = subForm.rights_icon[0].url
          delete subForm.is_admin
          this.$api.member[methodModel](subForm).then((res) => {
            if (res.code === 200) {
              this.$message.success(this.$t(subForm.id ? 'tips.successRev' : 'tips.successSave'))
              this.$router.back(-1)
            }
          })
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.lb-custom-member-rights-edit {
  width: 100%;
  .el-input,
  .el-select,
  .lb-input-number,
  .el-cascader {
    width: 300px;
  }
  .el-textarea {
    width: 600px;
  }
}
</style>
